import React, { Component } from 'react'

export default class App extends Component {
  items=["吃饭","睡觉","打亮亮"];
  state={todo:""};//放在state中的值，使用setState可以同时更新值和界面

  doDel(index){
    this.items.splice(index,1);
    this.setState({});
  }

  show=()=>this.items.map((item,index)=>
    <p key={index}>
      <span>{item}</span>
      <button onClick={()=>this.doDel(index)}>删除</button>
    </p>
  )

  // 点击按钮->获取输入框的数据->加入数据->刷新界面
  doAdd(){
    this.items.push(this.state.todo);
    this.setState({todo:""});
    //state中存储的值，利用setState更新
  }

  render() {
    return (
      <div>
        <div>
          <input type="text" 
                 placeholder="请输入待办事项" 
                 value={this.state.todo} 
                 onChange={(e)=>this.setState({todo:e.target.value})}/>
          <button onClick={this.doAdd.bind(this)} 
                  disabled={this.state.todo==""}>
                    确定
          </button>
        </div>
        <div>{this.show()}</div>
        <div>{this.items.length==0?<h3>暂无待办事项</h3>:""}</div>
      </div>
    )
  }
}
